<template>
	<view class="template-integral tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>


		<view class="integral-wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}"
			style="background: linear-gradient(180deg, #dffbfe, #f8feff);">
			<view class="adver-wrap tn-shadow tn-margin tn-bg-white tn-padding">
				<view class="tn-margin-bottom tn-text-bold">
					巡查信息
				</view>
				<view class="item-content">
					<text class="tn-color-gray">巡查名称</text>
					<text class="tn-color-black">{{content.title}}</text>
				</view>
				<view class="item-content">
					<text class="tn-color-gray">巡查地点</text>
					<text class="tn-color-black">{{content.place}}</text>
				</view>
				<view class="item-content">
					<text class="tn-color-gray">巡查类目</text>
					<text class="tn-color-black">{{content.type}}</text>
				</view>
				<view class="item-content">
					<text class="tn-color-gray">巡查人</text>
					<text class="tn-color-black">{{content.userName}}</text>
				</view>
				<view class="item-content">
					<text class="tn-color-gray">巡查时间</text>
					<text class="tn-color-black">{{content.date}}</text>
				</view>
			</view>

		</view>

		<view class="" v-if="type==0">
			<tn-button backgroundColor="#3668FC" fontColor="#fff" padding="40rpx 0" shadow fontBold width="80%"
				style="margin-left: 80rpx;">立即开始</tn-button>
		</view>
		<view class="" v-if="type==3">
			<tn-button backgroundColor="#fcd237" fontColor="#fff" padding="40rpx 0" shadow fontBold width="80%"
				style="margin-left: 80rpx;">补检</tn-button>
		</view>

		<view class="integral-wrap">
			<view class="adver-wrap tn-shadow tn-margin tn-bg-white tn-padding">
				<view class="tn-margin-bottom tn-text-bold">
					问题描述
				</view>
				<view class="">
					{{content.desc}}
				</view>
				<view class="tn-flex-#{3}">
					<image :src="item.src" mode="aspectFit" v-for="(item,index) in content.latestUserAvatar"
						:key="index" class="pro-image" @click="clickImg(item.src)"></image>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateIntegral',
		mixins: [template_page_mixin],
		data() {
			return {
				type: '',
				content: {
					userAvatar: 'https://resource.tuniaokj.com/images/simple/image5.jpg',
					userName: '张三',
					date: '2023-12-24 16:10:10',
					color: 'red',
					label: ['新年祝福'],
					type: '食堂安全',
					title: '2024巡检计划1',
					desc: '水龙头把手松动；消防栓损坏',
					place:'食堂东门',
					mainImage: 'https://resource.tuniaokj.com/images/simple/image0.jpg',
					num1: 10,
					num2: 12,
					processVoList: [{
							status: 0,
							processName: '东门',
							percent: '漏检',
							code: '2132464278345'
						},
						{
							status: 1,
							processName: '西门',
							percent: '已检',
							time: '2023-12-24 16:10:10',
							code: '2132464278345',
							pro: '把手老化'
						},
						{
							status: 2,
							processName: '北门',
							percent: '等待',
							code: '2132464278345'
						},
						{
							status: 1,
							processName: '西门',
							percent: '已检',
							time: '2023-12-24 16:10:10',
							code: '2132464278345',
							pro: '把手老化'
						},
						{
							status: 1,
							processName: '西门',
							percent: '已检',
							time: '2023-12-24 16:10:10',
							code: '2132464278345',
							pro: '把手老化'
						},
						{
							status: 1,
							processName: '西门',
							percent: '已检',
							time: '2023-12-24 16:10:10',
							code: '2132464278345',
							pro: '把手老化'
						},
						{
							status: 1,
							processName: '西门',
							percent: '已检',
							time: '2023-12-24 16:10:10',
							code: '2132464278345'
						},
						{
							status: 1,
							processName: '西门',
							percent: '已检',
							time: '2023-12-24 16:10:10',
							code: '2132464278345'
						},
						{
							status: 1,
							processName: '西门',
							percent: '已检',
							time: '2023-12-24 16:10:10',
							code: '2132464278345'
						},
						{
							status: 1,
							processName: '西门',
							percent: '已检',
							time: '2023-12-24 16:10:10',
							code: '2132464278345'
						},
						{
							status: 1,
							processName: '西门',
							percent: '已检',
							time: '2023-12-24 16:10:10',
							code: '2132464278345'
						}
					],
					latestUserAvatar: [{
							src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
						},
						{
							src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
						},
						{
							src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
						},
						{
							src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
						},
					],
					viewUserCount: 567,
					collectionCount: 543,
					commentCount: 543,
					likeCount: 206
				},

			}
		},
		onLoad(option) {
			this.type = option.type
		},
		methods: {
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			clickImg(url) {
				uni.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */

	/* 页面 start*/
	.integral-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 阴影 start*/
	.tn-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.integral-wrap {
		position: relative;
		z-index: 1;
	}

	/* 页面 end*/

	/* 翘边阴影*/
	.shadow-warp {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.01);
	}

	.shadow-warp:before,
	.shadow-warp:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
		transform: rotate(-3deg);
		z-index: -1;
	}

	.shadow-warp:after {
		right: 20rpx;
		left: auto;
		transform: rotate(3deg);
	}


	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/

	// 信息列表
	.item-content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	// 点位列表
	.item-process {
		display: flex;
		flex-direction: column;
		margin: 20rpx 0;

		.item-process-detail {
			margin: 10rpx 0 10rpx 80rpx;
		}

	}

	.pro-image {
		width: 180rpx;
		height: 180rpx;
		margin: 10rpx 10rpx;
	}
</style>